<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 
        加载动画：
            在echarts在获取数据的时候呈现出来的画面(在一个合适的时机：获取数据时加载动画，数据获取成功后，隐藏加载动画)
            显示加载动画:mEcharts.showLoading()
            在获取数据之前调用这个函数
            隐藏加载动画：  mEcharts.hideLoading()
            在获取数据成功之后调用这个函数

        增量动画：
            通过一个函数对数据进行处理

        动画配置：
        这个配置是在option中进行配置的，animation：true，默认情况下是true
        animationDuration:控制的是动画时长，是一毫秒为单位的,他可以接收一个回调函数
        animationEasing:'bounceOut' 是一个缓动动画
        animationThreshold:,//动画元素的一个阈值，如果动画的元素超过了这个值，将不会产生动画

     -->
     <div style="width: 600px; height: 400px;"></div>
     <button id="btn">修改数据</button>
    </body>
    <script>


        var mCharts =echarts.init(document.querySelector('div'))
        var option = {
            animation:true,//默认情况下是true
            // animationDuration:5000,
            animationDuration:function(arg){//这个参数代表了产生动画的的各个项目
                return arg*2000
            },
            animationEasing:'bounceOut',//他有很多的类型，可以在官网中查看，控制动画的缓动
            // 通用配置title
            title:{
                text:'成绩展示',
                // 文字样式
                textStyle:{
                    color:'red',
                    fontStyle:'oblique'
                },
                // 标题边框
                borderWidth:5,
                borderColor:'blue',
                borderRadius:5,
                left:0
            },
            // 通用配置tooltip
            tooltip:{
                trigger:'item',
                triggerOn:"mousemove",
                formatter:'{b}的{a}成绩是：{c}'
                // formatter:function(arg){
                //     // console.log(arg);
                //     return "hahah "
                // }
            },
            // 通用配置toolbox（能够下载图片等功能）
            toolbox:{
               feature:{
                // 保存图片
                saveAsImage:{},
                // 数据视图
                dataView:{},
                // 重置数据
                restore:{},
                // 区域缩放
                dataZoom:{},
                // 动态图表的切换
                magicType:{
                    type:['line','bar']
                }
               }
            },
            // 通用配置legend（用来筛选系列）
            legend:{
                data:['语文','数学']//会进行筛选匹配，关键在于数据中的name值
            },
            xAxis:{
                type:'category',
                data:['小明','小红','小王']
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:[70,50,90],
                    // 设置最大和最小值
                    markPoint:{
                        data:[
                            {
                                type:'max',name:'最大值'
                            },
                            {
                                type:"min",name:'最小值'
                            }
                        ]
                    },
                    // 展示平均值
                    markLine:{
                        data:[
                        {
                            type:'average',name:'平均值'
                        }
                        ]  
                    },
                    // 显示数值
                    label:{
                        show:true,
                        // 旋转
                        rotate:50,
                        position:'top'
                    },
                    // 对柱的宽高进行展示
                    barWidth:'30'
                },
                
            ]
        }
    mCharts.setOption(option)
// 增量动画只需要将变化的数据进改变即可，不需要全部写入改变
// setOption 可以设置多次，他们不是相互覆盖的关系，他们是相互整合的关系
// 我们在设置新的option的时候，只需要考虑需要修改的部分
// 这个不仅可以进行修改数据，也可以进行增加数据，只需要将数据数组中进行添加新的数据即可
    var Btn = document.getElementById('btn')
    Btn.addEventListener('click',()=>{
        var arr=[30,90,80]
        var option={
            series:[
                {
                    data:arr
                }
            ]
        }
        mCharts.setOption(option)

    })

</script>
</html>